import echarts from "../ec-canvas/echarts.min"
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    from: {
      type: String,
      value: ""
    },
    radarList: {
      type: Object,
      value: {}
    },
    isShowLegend: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
    radarList: {},
    // isShowLegend:true,
    radarList1: {},
    indicatorList: [],
    legendList: [],
    radarValueList: [],
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 设置雷达图颜色
    formatRadarColor($color1, $bgColor1, $bgColor2) {
      return {
        lineStyle: { //辐射区线条颜色
          color: $color1 || '#1890FF'
        },
        itemStyle: { // 单个拐点标志的样式设置。
          normal: {
            color: $color1 || '#1890FF'
          }
        },
        areaStyle: // 雷达图辐射区域的样式
        {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: $bgColor1 || '#C2EDFF'
              },
              {
                offset: 1,
                color: $bgColor2 || '#BDE0FF'
              }
            ]
          )
        },
      }
    },


    // 格式化传参数据----------------------
    formatData(radarList, $color1, $bgColor1, $bgColor2) {
      let indicatorList = [];
      let radarValueItem = [];
      radarList.list.forEach(item => {
        indicatorList.push({
          name: item.name,
          max: 100
        })
        radarValueItem.push(item.value)
      })
      indicatorList[0].axisLabel = { //设置坐标轴上文字颜色
        show: true,
        fontSize: 12
      }
      // 1: '#1890FF','#36C8FF','#2494FF'
      let a = this.formatRadarColor($color1, $bgColor1, $bgColor2)
      this.data.radarValueList.push({
        value: radarValueItem,
        name: radarList.name,
        ...a
      })
      this.data.legendList.push(radarList.name)
      this.setData({
        indicatorList,
        radarValueList: this.data.radarValueList,
        legendList: this.data.legendList
      })
    },
    
    // 初始化雷达图--------------------
    init_radarMap: function () {
      // 创建雷达图实例
      this.data.radarMapComponnet && this.data.radarMapComponnet.init((canvas, width, height, dpr) => {
        const radarMap = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        // 取消legend的事件  此事件暂时未达到预期效果
        radarMap.on('legendselectchanged', function (params) {
          radarMap.setOption({
            legend: {
              selected: {
                [params.name]: true
              }
            }
          })
        })
        // 设置相关配置项
        radarMap.setOption(this.getRadarMapOption());
        return radarMap;
      });
    },
    
    // 雷达图的配置项---------------------
    getRadarMapOption: function () {
      this.formatData(this.data.radarList)
      if (Object.keys(this.data.radarList1).length) {
        this.formatData(this.data.radarList1, '#FA6561', '#F3E7E5', '#FFEAE9')
      }
      return {
        backgroundColor: "#ffffff",
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        legend: {
          data: this.data.legendList,
          type: 'scroll',
          orient: 'horizontal', //设置栏位如何显示,横轴或纵轴
          bottom: '0',
          left: this.data.legendList.length == 2 ? '10%' : '30%',
          show: this.data.isShowLegend
        },
        radar: {
          // shape: 'circle',
          indicator: this.data.indicatorList,
          radius: 65, //缩放 防止文字遮挡
          center: ['50%', '50%'], //位置
          axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
            lineStyle: {
              color: '#BFBFBF',
              // 坐标轴线线的颜色。
              width: 1,
              // 坐标轴线线宽。
              type: 'solid',
              // 坐标轴线线的类型。
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: '#fff'
              // 图表背景网格的颜色
            }
          },
          splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: '#e9e9e9',
              // 分隔线颜色
              width: 1,
              // 分隔线线宽
            }
          },
          name: { //文本名称样式
            textStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
            }
          },
        },
        series: [{
          type: 'radar',
          symbolSize: 0, //设置拐点的圈为0，不显示
          data: this.data.radarValueList,
        }]
      };
    }
  },
  lifetimes: {
    attached() {
      // 获取ec-canvas组件
      this.setData({
        radarMapComponnet: this.selectComponent("#mychart-dom-graph")
      })
      // 初始化雷达图数据
      this.init_radarMap()
    }
  }
})